// 1.引入路由方法
import {createRouter,createWebHashHistory} from 'vue-router'
import {  h } from "vue";
import { NIcon } from "naive-ui";
import {
  CartOutline,
  GiftOutline,
  AppsOutline,
  BonfireOutline,
  ContractOutline,
  PieChartOutline,
  PencilOutline
} from "@vicons/ionicons5";

// 2.引入页面组件
import CartPage from '../views/CartPage.vue'
import Product from '../views/Product/index.vue'
import Login from '../views/Login/index.vue'
import MainLayout from '../layout/index.vue'
import Page01 from '../views/ParamTest/Page01.vue'
import Page02 from '../views/ParamTest/Page02.vue'
import Page03 from '../views/ParamTest/Page03.vue'
import ParamTest from '../views/ParamTest/index.vue'
import NotFound from '../views/NotFound.vue';
import PiniaTest from '../views/PiniaTest/index.vue'
import CompA from '../views/PiniaTest/CompA.vue';
import CompB from '../views/PiniaTest/CompB.vue';
import { useAccount } from '../store/account';
import ProductEdit from '../views/Product/Edit.vue';
import Setting from '../views/Setting.vue';
import Manager from '../views/Manager/index.vue';
import Role from '../views/Manager/Role.vue';
import UserList from '../views/Manager/UserList.vue';
import NoPermission from '../views/NoPermission.vue';
import DashBoard from '../views/DashBoard/index.vue';
import RichText from '../views/RichText.vue';

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
// 3.设置路由-组件的映射关系
export const routes = [ // 第一层
  {
    path:'/',
    component:MainLayout,
    children:[ // 第二层
      {
        path:'/dashboard',
        component:DashBoard,
        label:'数据可视化',
        icon:renderIcon(PieChartOutline),
      },
      {
        path:'/rich/text',
        component:RichText,
        label:'富文本编辑',
        icon:renderIcon(PencilOutline),
      },
      {
        path:'/cart',
        component:CartPage,
        label:'购物车管理',
        icon:renderIcon(CartOutline),
      },
      {
        path:'/product',
        component:Product,
        label:'商品管理',
        icon:renderIcon(GiftOutline)
      },
      {
        path:'/product/edit',
        component:ProductEdit,
        label:'商品编辑',
        icon:renderIcon(GiftOutline),
        show:false
      },
      {
        path:'/page',
        component:ParamTest,
        label:'动态路由',
        icon:renderIcon(AppsOutline),
        children:[  //第三层
          {path:'/page/page1/:id',component:Page01,label:'页面01'},
          {path:'/page/page2/:num',component:Page02,label:'页面02'},
          {path:'/page/page3',component:Page03,label:'页面03'}
        ]
      },
      {
        path:'/pinia',
        component:PiniaTest,
        label:'状态机',
        icon:renderIcon(BonfireOutline),
        children:[  //第三层
          {path:'/pinia/comp/a',component:CompA,label:'A组件'},
          {path:'/pinia/comp/b',component:CompB,label:'B组件'},
        ]
      },
      {
        path:'/setting',
        component:Setting,
        label:'个人设置',
        icon:renderIcon(GiftOutline),
        // show:false
      },
      {
        path:'/manager',
        component:Manager,
        label:'权限管理',
        icon:renderIcon(ContractOutline),
        children:[  //第三层
          {path:'/manager/role',component:Role,label:'角色管理'},
          {path:'/manager/user',component:UserList,label:'账号管理'},
        ]
      },
      {
        path:'/no/permission',
        component:NoPermission,
        label:'无权访问',
        icon:renderIcon(GiftOutline),
        show:false
      },
      
    ]
  },
  {path:'/login',component:Login},
  {path:'/:pathMatch(.*)*', component: NotFound },
]

// 4. 生成路由对象
const router = createRouter({
  'history':createWebHashHistory(),  //路由模式
  'routes':routes   
})

// 全局前置守卫
router.beforeEach((to,from,next)=>{
  //to   到哪里去，相关信息
  //from 从哪里来，相关信息
  //next  方法调用后代表放行
  console.log('全局前置守卫',to,from);
  // 路由白名单
  const whiteList = ['/login','/no/permission']
  if(whiteList.includes(to.path)){
    next()
    return
  }
  //登录状态判断
  const account = useAccount()
  if(account.jwtToken){
    //访问权限判断: to.path 是否存在于 permission中
    let isPermit = account.permitData.permission.includes(to.path)
    isPermit ? next() : next('/no/permission')
  }else{
    next('/login')
  }

})

// 5. 导出路由对象
export default router